<template>
    <view>
        <view>
            <form>
                <view class="cu-form-group margin-top">
                    <view class="title">组织名称</view>
                    <input @input="Input" data-field="association_name" placeholder="计科青协" />
                </view>
                <view class="cu-form-group">
                    <view class="title">归属学院</view>
                    <picker class="form-input" mode="selector" :range="collegeList" :value="index" @change="collegeChange">
                        {{ association.college_name === undefined ? '请选择归属学院' : association.college_name }}
                    </picker>
                </view>
                <view class="cu-bar bg-white margin-top">
                    <view class="action">LOGO上传</view>
                    <view class="action">{{ imgList.length }}/1</view>
                </view>
                <view class="cu-form-group">
                    <view class="grid col-4 grid-square flex-sub">
                        <view class="bg-img" @tap="ViewImage" :data-url="imgList[index]" v-for="(item, index) in imgList" :key="index">
                            <image :src="imgList[index]" mode="aspectFill"></image>

                            <view class="cu-tag bg-red" @tap.stop.prevent="DelImg" :data-index="index">
                                <text class="cuIcon-close"></text>
                            </view>
                        </view>
                        <view class="solids" @tap="ChooseImage" v-if="imgList.length === 0">
                            <text class="cuIcon-cameraadd"></text>
                        </view>
                    </view>
                </view>
                <view class="cu-form-group align-start">
                    <view class="title">描述</view>
                    <textarea maxlength="-1" @input="Input" data-field="description" placeholder="内容"></textarea>
                </view>
                <view class="flex justify-center">
                    <button class="cu-btn bg-blue shadow-blue" style="width: 80%;" @tap="Apply">
                        申请
                    </button>
                </view>
            </form>
        </view>
    </view>
</template>

<script>
const app = getApp();

const getData = (url, param) => {
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            method: 'POST',
            data: param,
            header: {
                'Content-Type': 'application/json'
            },

            success(res) {
                resolve(res.data);
            },

            fail(err) {
                reject(err);
            }
        });
    });
};

export default {
    data() {
        return {
            //图片列表
            imgList:[],
            //组织数据
            association: {},
            //学院列表
            collegeList: [],
            //学院数据
            collegeDetail:[],
            //学院索引
            index: -1,

        };
    },
    onLoad: function (options) {
         this.getCollegeList();
    },
    onBackPress() {
        uni.reLaunch({
            url: '../../pages/association/list/list'
        });
    },
    methods: {

        /**
         * 获取学院数据
         */
        getCollegeList() {
            const that = this;

            getData(app.globalData.ApiUrl + 'api/Android/getCollegeList', {
                SafeCode: uni.getStorageSync('SafeCode')
            }).then(res => {
                that.setData({
                    collegeDetail: res.data
                });
                let college = [];
                for (let i = 0; i < res.data.length; i++) {
                    college.push(res.data[i].college_name);
                }
                that.setData({
                    collegeList: college
                });
                console.log(that.collegeDetail);
                console.log(that.collegeList);
            });
        },


        /**
         * 输入框输入事件
         */
        Input(e) {
            let field = 'association.' + e.currentTarget.dataset.field;
            let value = e.detail.value;
            this.setData({
                [field]: value
            });

            console.log(this.association);
        },

        /**
         * 选择图片
         */
        ChooseImage:function () {
            let that = this;
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function (res) {
                    that.setData({
                        imgList:[res.tempFilePaths[0]],
                    })
                }
            });
        },
        /**
         * 预览图片
         **/
        ViewImage:function (e) {
            uni.previewImage({
                urls: this.imgList,
                current: e.currentTarget.dataset.url
            });
        },
        /**
         * 删除图片
         **/
        DelImg:function (e) {
            let that = this;
            that.setData({
                imgList:[]
            })
        },

        /**
         * 修改学院
         */
        collegeChange(e) {
            let college_id = this.collegeDetail[e.detail.value].college_id;
            let college_name = this.collegeDetail[e.detail.value].college_name;

            this.setData({
                'association.college_id': college_id,
                'association.college_name': college_name,
            });

            console.log(this.index);
            console.log(this.association);

        },
        /**
         * 提交申请
         */
        Apply() {
            let that = this;
            let association = this.association;
            let imgList = this.imgList;
            let SafeCode = uni.getStorageSync('SafeCode');

            //上传图片，附加数据
            if (imgList.length <= 0) {
                uni.showToast({
                    title: '请上传图片',
                    icon: 'none'
                });
                return;
            }
            uni.showLoading({
                title: '正在提交',
                mask: true
            });
            uni.uploadFile({
                url: app.globalData.ApiUrl + 'api/Android/applyAssociation',
                filePath: imgList[0],
                name: 'logo',
                formData: {
                    'SafeCode': uni.getStorageSync('SafeCode'),
                    'association': JSON.stringify(association),
                    'edit':0
                },
                success: function (res) {

                    console.log(res);

                    let data = JSON.parse(res.data);
                    uni.hideLoading();
                    if (data.code == 1) {
                        uni.showToast({
                            title: '创建成功',
                            icon: 'none'
                        });
                    }else {
                        uni.showToast({
                            title: data.msg,
                            icon: 'none'
                        });
                    }
                }
            });
        }


    }
};
</script>
<style>
@import "/pages/publish/publish.css";
</style>
